<template>
  <view>
    <uni-popup ref="industryPopup" type="bottom" background-color="#fff">
      <view class="popupWall">
        <view class="title-list">
          <view v-for="(item, index) in industryData" :key="index">
            <view
              class="title-item"
              :class="{ active: tabIndex == index }"
              v-if="item.list.length > 0"
              @click="tabIndex = index">
              <text v-if="item.id !== ''">{{ item.name }}</text>
              <text v-else class="placeholder-text">请选择</text>
            </view>
          </view>
        </view>
        <view v-for="(industry, index) in industryData" :key="index">
          <view class="tag-list" v-if="tabIndex === index">
            <view
              class="tag-item"
              v-for="item in industry.list"
              :key="item.id"
              @click="tabSelect(item)"
              :class="{ active: industry.id == item.id }"
              >{{ item.label }}</view
            >
          </view>
        </view>

        <view class="popup-ft">
          <view class="popup-ftBtn" @click="popupClose"> 取 消 </view>
          <view class="popup-ftBtn active" @click="submitFn"> 确 认 </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { industryTree } from "@/api/common.js";
export default {
  name: "industrySelect",
  data() {
    return {
      showLevel: 2, // 显示几级
      tabIndex: 0, // 位置第几级

      industryData: [
        { id: "", name: "", list: [] },
        { id: "", name: "", list: [] },
      ],
    };
  },
  computed: {},
  created() {
    this.getTree();
  },
  mounted() {},
  methods: {
    // 选择内容
    tabSelect(data) {
      let tabIndex = this.tabIndex;
      let index = tabIndex + 1;
      let { id, label } = data;
      if (data.children && data.children.length > 0) {
        this.$set(this.industryData[index], "list", data.children);
      }
      this.tabIndex = index < this.showLevel ? index : this.showLevel - 1;

      this.industryData = this.industryData.map((item, idx) => {
        if (idx === tabIndex) {
          Object.assign(item, { id, name: label });
        }
        if (idx > tabIndex) {
          Object.assign(item, { id: "", name: "" });
        }
        return item;
      });
    },
    // 获取列表内容
    getTree() {
      // 行业
      industryTree().then((res) => {
        this.$set(this.industryData[0], "list", res.data);
      });
    },
    // 确认
    submitFn() {
      var hasEmptyId = this.industryData.some((v) => v.id == "");
      if (hasEmptyId) {
        uni.showToast({
          title: "选项不能为空",
          duration: 2000,
        });
        return true;
      }
      let arr = this.industryData.map((v) => {
        let item = {
          id: v.id,
          name: v.name,
        };
        return item;
      });
      this.$emit("change", arr);
      this.popupClose();
    },
    // 打开弹窗
    popupOpen() {
      this.$refs.industryPopup.open();
    },
    // 关闭弹窗
    popupClose() {
      this.$refs.industryPopup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.popupWall {
  background: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  // .popup-title{
  // 	font-size: 32rpx;
  // 	color: #000000;
  // 	font-weight: 500;
  // 	padding: 32rpx 24rpx;
  // }
  .title-list {
    display: flex;
    padding: 24rpx 24rpx 16rpx;
    .title-item {
      position: relative;
      font-size: 28rpx;
      line-height: 72rpx;
      color: rgba(0, 0, 0, 0.45);
      font-weight: 500;
      padding: 0 16rpx;
      .placeholder-text {
        color: #000000;
      }
      &.active::after {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        content: "";
        width: 20rpx;
        height: 6rpx;
        display: block;
        background: #ff9e24;
        border-radius: 6rpx;
        margin: auto;
      }
    }
  }
  .tag-list {
    min-height: 50vh;
    // display: flex;
    // flex-wrap: wrap;
    margin: 10rpx 14rpx;
    .tag-item {
      width: 31%;
      height: 64rpx;
      font-size: 24rpx;
      color: rgba(0, 0, 0, 0.88);
      line-height: 28rpx;
      // display: flex;
      // align-items: center;
      // justify-content: center;
      display: inline-block;
      vertical-align: top;
      background: rgba(216, 216, 216, 0.36);
      border-radius: 32rpx;
      margin: 0 1% 20rpx;
      text-align: center;
      padding: 18rpx 8rpx;
      box-sizing: border-box;

      &.active {
        color: #ffffff;
        background: #ff9e24;
      }
    }
  }
  .popup-ft {
    display: flex;
    box-shadow: 0 -24rpx 24rpx 0 rgba(201, 201, 201, 0.1);
    .popup-ftBtn {
      font-size: 28rpx;
      color: rgba(0, 0, 0, 0.45);
      line-height: 88rpx;
      text-align: center;
      padding-bottom: 30rpx;
      font-weight: bold;
      flex: 1;
      &.active {
        color: #ff9e24;
      }
    }
  }
}
</style>
